<template>
  <div class="flex">
    <!-- 左侧注册表单 -->
    <div class="flex-1 flex items-center justify-center bg-gray-50">
      <div class="max-w-md w-full space-y-6 p-8">
        <div class="text-center">
          <h2 class="text-2xl font-bold text-gray-900 mb-6">Please Fill out form to Register!</h2>
        </div>
        
        <form class="space-y-4" @submit.prevent="handleRegister">
          <div>
            <label for="fullname" class="block text-sm font-medium text-gray-700 mb-1">
              Full name:
            </label>
            <input
              id="fullname"
              v-model="fullname"
              type="text"
              required
              class="w-full px-4 py-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              placeholder="Enter your full name"
            />
          </div>
          
          <div>
            <label for="username" class="block text-sm font-medium text-gray-700 mb-1">
              Username:
            </label>
            <input
              id="username"
              v-model="username"
              type="text"
              required
              class="w-full px-4 py-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              placeholder="Enter your username"
            />
          </div>
          
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
              Email:
            </label>
            <input
              id="email"
              v-model="email"
              type="email"
              required
              class="w-full px-4 py-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              placeholder="Enter your email"
            />
          </div>
          
          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
              Password:
            </label>
            <input
              id="password"
              v-model="password"
              type="password"
              required
              class="w-full px-4 py-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              placeholder="Enter your password"
            />
          </div>
          
          <div>
            <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">
              Confirm Password:
            </label>
            <input
              id="confirmPassword"
              v-model="confirmPassword"
              type="password"
              required
              class="w-full px-4 py-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              placeholder="Confirm your password"
            />
          </div>
          
          <button style="background-color: #0066a1;"
            type="submit" 
            class="w-full  text-white py-3 px-4 rounded-full hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-200 font-medium mt-6"
          >
            Register
          </button>
        </form>
        
        <div class="text-center">
          <p class="text-gray-600">
            Yes I have an account? 
            <NuxtLink to="/login" style="color: #0066a1;" class="text-blue-600 hover:text-blue-500 font-medium">Login</NuxtLink>
          </p>
        </div>
      </div>
    </div>
    
 
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { userApi } from '~/public/utils/api'
import { useLoginDialog } from '~/composables/useLoginDialog'

const fullname = ref('')
const username = ref('')
const email = ref('')
const password = ref('')
const confirmPassword = ref('')

const handleRegister = async () => {
  if (password.value !== confirmPassword.value) {
    const { $toast } = useNuxtApp()
    $toast.error('Passwords do not match')
    return
  }
  
  try {
    // Call register API
   let recordId=  localStorage.getItem('recordId')
    const result = await userApi.register({
      userName: username.value,
      password: password.value,
      email: email.value,
      fullName: fullname.value,
      recordId: recordId
    })
    
    console.log('Registration successful:', result)
    const { $toast } = useNuxtApp()
    $toast.success('Registration successful!')
    
    // Redirect to login page after successful registration
    await navigateTo('/login')
  } catch (error) {
    console.error('Registration failed:', error)
    const { $toast } = useNuxtApp()
    $toast.error(`Registration failed: ${error.message}`)
  }
}

// 自动重定向逻辑
onMounted(() => {
  const route = useRoute()
  const redirect = route.query.redirect
  
  // 重定向到首页
  navigateTo('/')
  
  // 打开注册弹窗（注意是 register 标签）
  const { showLoginDialog } = useLoginDialog()
  showLoginDialog('register', redirect)
})

// Set page title
useHead({
  title: 'Register - Carbon Tariff Platform'
})
</script> 